Please address the comments from this code review:

## Overall Comments
- The logic for resolving `uiTheme` from a `ThemeMode` (`resolveUiThemeFromMode` in `stores/customizer.ts` and `resolveUiTheme` in `config.ts`) is currently duplicated; consider centralizing this into a single shared helper to avoid divergence in future changes.
- The theme-switch UI (options array, current icon computation, and dropdown markup) is implemented separately in `VerticalHeader.vue`, `LoginPage.vue`, and `SetupPage.vue`; extracting a reusable `ThemeSwitcher` component would reduce duplication and make future behavior changes easier to maintain.

## Individual Comments

### Comment 1
<location path="dashboard/src/stores/customizer.ts" line_range="6-15" />
<code_context>
 const DARK_THEMES: ReadonlySet<string> = new Set(['PurpleThemeDark']);

-export const useCustomizerStore = defineStore("customizer", {
+function resolveUiThemeFromMode(mode: ThemeMode): string {
+  if (mode === 'dark') return 'PurpleThemeDark';
+  if (mode === 'light') return 'PurpleTheme';
</code_context>
<issue_to_address>
**suggestion:** Avoid duplicating theme-mode-to-uiTheme resolution logic between config and store.

`resolveUiTheme` in `config.ts` and `resolveUiThemeFromMode` here both map `ThemeMode` → `uiTheme`. Maintaining two mappings risks them diverging as themes evolve. Consider exporting a single helper (from `config.ts` or a shared theme util) and reusing it in the store so config and runtime logic share the same mapping.

Suggested implementation:

```typescript
import { defineStore } from 'pinia';
import config, { type ThemeMode, resolveUiTheme } from '@/config';

```

```typescript
const DARK_THEMES: ReadonlySet<string> = new Set(['PurpleThemeDark']);

const resolveUiThemeFromMode = resolveUiTheme;

```
</issue_to_address>

### Comment 2
<location path="dashboard/src/config.ts" line_range="1" />
<code_context>
+export type ThemeMode = 'light' | 'dark' | 'system';
+
 export type ConfigProps = {
</code_context>
<issue_to_address>
**issue (complexity):** Consider extracting the theme mode and uiTheme resolution (including localStorage and matchMedia handling) into a shared utility and letting this config file simply consume it.

You can reduce complexity and duplication by centralizing the `ThemeMode` + `uiTheme` logic in a small utility and keeping this config file “dumb” (just consuming that utility).

### 1. Extract theme mode utilities

Create a shared utility, e.g. `themeModeUtils.ts`:

```ts
// themeModeUtils.ts
export type ThemeMode = 'light' | 'dark' | 'system';

export function checkThemeMode(local: Storage): ThemeMode {
  const mode = local.getItem('themeMode') as ThemeMode | null;
  if (mode === 'light' || mode === 'dark' || mode === 'system') return mode;

  const legacyTheme = local.getItem('uiTheme');
  if (legacyTheme === 'PurpleThemeDark') {
    local.setItem('themeMode', 'dark');
    return 'dark';
  }
  if (legacyTheme === 'PurpleTheme') {
    local.setItem('themeMode', 'light');
    return 'light';
  }

  local.setItem('themeMode', 'system');
  return 'system';
}

export function resolveUiTheme(mode: ThemeMode, prefersDark: boolean): string {
  if (mode === 'dark') return 'PurpleThemeDark';
  if (mode === 'light') return 'PurpleTheme';
  return prefersDark ? 'PurpleThemeDark' : 'PurpleTheme';
}

export function resolveThemeState(local: Storage, win: Window | undefined) {
  const themeMode = checkThemeMode(local);
  const prefersDark =
    typeof win !== 'undefined' &&
    win.matchMedia('(prefers-color-scheme: dark)').matches;

  const uiTheme = resolveUiTheme(themeMode, prefersDark);
  local.setItem('uiTheme', uiTheme);

  return { themeMode, uiTheme };
}
```

This keeps all existing behavior (migration, `matchMedia`, `localStorage` side effects) in one place.

### 2. Simplify `config` to just consume the utility

Then your config file becomes simpler and has no duplicated logic:

```ts
// config.ts
import { ThemeMode, resolveThemeState } from './themeModeUtils';

export type ConfigProps = {
  Sidebar_drawer: boolean;
  Customizer_drawer: boolean;
  mini_sidebar: boolean;
  fontTheme: string;
  uiTheme: string;
  themeMode: ThemeMode;
  inputBg: boolean;
};

const { themeMode, uiTheme } = resolveThemeState(localStorage, window);

const config: ConfigProps = {
  Sidebar_drawer: true,
  Customizer_drawer: false,
  mini_sidebar: false,
  fontTheme: 'Roboto',
  uiTheme,
  themeMode,
  inputBg: false,
};

export default config;
```

### 3. Reuse the same utility in the store

In `stores/customizer.ts`, replace any `resolveUiThemeFromMode` / duplicated `matchMedia` logic with calls to `resolveThemeState` / `resolveUiTheme`. For example:

```ts
// stores/customizer.ts (sketch)
import { resolveUiTheme, ThemeMode } from '../themeModeUtils';

function someSetter(mode: ThemeMode) {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const uiTheme = resolveUiTheme(mode, prefersDark);
  // ...
}
```

This removes duplicated mapping and `matchMedia` code, reduces cognitive load, and guarantees config and store stay in sync while preserving all current features.
</issue_to_address>